<template>
	<view class="pageDevice flex flex-col">
		<navbar :leftText="'设备'" :leftIcon="false" :fontSizeBig="36"></navbar>
		<view class=" deviceBg  flex-1 " style="overflow-y: hidden;">
			<view class="w690">
				<!-- 搜索 -->
				<view>
					<up-input v-model="userName" placeholder="搜索设备" prefixIcon="search" shape="circle"
						prefixIconStyle="font-size: 22px;color: #909399">
						<template #suffix>
							<view @click="searchDevice" class="text-green text-26" style="padding-right:10rpx;">搜索
							</view>
						</template>
					</up-input>
					<view class="jieFen">
						<up-tabs :list="list1" @click="selectType" lineWidth="60"
							:lineColor="`url(${lineBg}) 100% 100%`" lineColor="#38FDFF" :activeStyle="{
						    color: '#FFFFFF'
						}" :inactiveStyle="{
						    color: '#FFFFFF ',
						    transform: 'scale(1)'
						}" itemStyle="padding-left: 10px; padding-right: 20px; height: 40px;">
							<template #right>
								<view class="flex-start">
									<!-- <view style="padding-left: 4px;" @tap="showFilter">
										<image style="width:32rpx;height:32rpx;"
											src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/shaixuan@2x.png"
											mode="aspectFill"></image>
									</view>
									<view style="padding-left: 15px;" @tap="$u.toast('插槽被点击')">
										<image style="width:32rpx;height:32rpx;"
											src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/leimu@2x.png"
											mode="aspectFill"></image>
									</view> -->
								</view>
							</template>
						</up-tabs>

						<!-- 设备筛选条件 -->
						<up-transition :show="isShowFuliter" mode="fade">
							<view class="fuliterBox">
								<view class="fuliterMain text-white text-26">
									<view>
										<view style="margin: 20rpx 0;">网络状态</view>
										<view class="flex-between">
											<view class="netWorkItem flex-center" v-for="(item,index) in networkList">
												{{item.name}}
											</view>
										</view>
									</view>
									<view>
										<view style="margin: 20rpx 0;">运营商</view>
										<view class="flex-between">
											<view class="netWorkItem flex-center" v-for="(item,index) in yunYiList">
												{{item.name}}
											</view>
										</view>
									</view>
									<view>
										<view style="margin: 20rpx 0;">运营商</view>
										<view class="flex-between">
											<view class="netWorkItem flex-center" v-for="(item,index) in yunYiList">
												{{item.name}}
											</view>
										</view>
									</view>
									<view>
										<view style="margin: 20rpx 0;">运营商</view>
										<view class="flex-between">
											<view class="netWorkItem flex-center" v-for="(item,index) in yunYiList">
												{{item.name}}
											</view>
										</view>
									</view>

									<view class="flex-around">
										<view class="resertFuliter flex-center" @click="resertFuliter">重置</view>
										<view class="confirmFuliter flex-center" @click="confirmFuliter">确定</view>
									</view>
								</view>

							</view>
						</up-transition>

					</view>
					<!-- 设备数量展示 -->
					<!-- <view class="text-white deviceNum flex-around text-blue">
						<view class="flex-column-center" style="width: 33%;">
							<view class="text-32 text-white">452</view>
							<view style="margin-top:10rpx;">设备数量</view>
						</view>
						<view class="flex-column-center onlineDevice">
							<view class="text-32 text-green">452</view>
							<view style="margin-top:10rpx;">
								<image class="liXianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/zaixian@2x.png"
									mode="aspectFill"></image>
								在线
							</view>
						</view>
						<view class="flex-column-center" style="width: 33%;">
							<view class="text-32 text-red">452</view>
							<view style="margin-top:10rpx;">
								<image class="liXianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/lixian@2x.png"
									mode="aspectFill"></image>
								离线
							</view>
						</view>
					</view> -->

					<view class="flex classifyMain text-white">
						<view v-for="(item,index) in classifyAll" @click="selectDevice(item,index)" :key="index"
							style="margin-right:6rpx;">
							<view class="flex-center"
								:class="index == currentIndex ? 'defaultClassify' : 'activeClassify'">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- <view style="color:#fff;" @click="goDeviceDetail">去设备</view> -->
			<!-- 设备列表 -->
			<view class=" w690" id="device">
				<view class="flex flex-col" style="overflow-y: hidden;background-color: #11102A;">
					<scroll-view v-if="deviceList.length>0" @scrolltolower="teamlower" enable-flex
						class="heightFull device_H" :style="{ height: scrollHeight }" scroll-y="true" @scroll="scroll">
						<view class="deviceItem" @click="goDeviceDetail(item)" v-for="(item,index) in deviceList"
							:key="item.id">
							<view class="flex-between text-white deviceHead">
								<view class="text-28">
									{{item.name || '--'}}
								</view>
								<view class="flex-start" style="padding-right:20rpx;">
									<text class="text-28 text-blue">昨日收益：</text>
									<text class="text-28">￥{{item.income/10000 || "--"}}</text>
								</view>
							</view>
							<view class="text-white deviceMain">
								<view>
									<view class="text-26" style="margin-bottom: 8px;margin-top:20rpx;">
										<view>
											<text class="text-blue">联系电话：</text>
											{{item.mobile || '--'}}
										</view>
									</view>
								</view>
								<view class="">
									<view class="text-26 flex-start deviceYun" style="margin-bottom: 8px;">
										<view>
											<text class="text-blue">运营商：</text>
											{{item.isp || '--'}}
										</view>
										<view>
											<text class="text-blue">总带宽：</text>
											{{item.usbw || '--'}}mbps
										</view>
									</view>
									<view class="text-26 flex-start deviceYun" style="margin-bottom: 8px;">
										<view>
											<text class="text-blue">安装人员：</text>
											{{item.buildName}}
										</view>
										<view>
											<text class="text-blue">安装时间：</text>
											{{timeFormat(item.buildTime,'yyyy-mm-dd')}}
										</view>
									</view>
								</view>
								<view>
									<view class="text-26" style="margin-bottom: 8px;margin-top:5rpx;">
										<view>
											<text class="text-blue">安装地址：</text>
											<text style="line-height: 40rpx;">{{item.address || '--'}}</text>
										</view>
									</view>
								</view>
								<!-- <view class="text-26 flex-between">
								<view>AI诊断</view>
								<view class="flex-start">
									<view class="text-20 AIItem">昨日在线时间短</view>
									<view class="text-28" style="color:#3b5dfd;margin-left: 15rpx;">点击查看</view>
								</view>
							</view> -->
								<view class="deviceStatus">
									<view v-if="item.status == 'online'" class="flex-start">
										<image class="liXianIcon"
											src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/zaixian@2x.png"
											mode="aspectFill"></image>
										<view class="text-22 text-green">在线</view>
									</view>
									<view v-if="item.status == 'outline'" class="flex-start">
										<image class="liXianIcon"
											src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/lixian@2x.png"
											mode="aspectFill"></image>
										<view class="text-22 text-red">离线</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>

					<view v-else class="flex-center" :style="{ height: scrollHeight }">
						<noData :width="250" :height="250"
							:imgUrl="'http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/kong.gif'"></noData>
					</view>

					<!-- 添加设备按钮 -->
					<view class="deviceAddIcon">
						<image @click.stop="addDevice" style="width:48rpx;height:48rpx;"
							src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/tianjia@2x.png"
							mode="aspectFill">
						</image>
					</view>


				</view>
			</view>




		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';

	import {
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';

	import {
		timeFormat
	} from 'uview-plus'
	import * as api from "@/utils/api.js"
	// 滚动区域的高度
	const scrollHeight = ref();
	// 滑动部分的高度
	onMounted(() => {
		uni.getSystemInfo({
			success: function(res) {
				const query = wx.createSelectorQuery()
				query.select('#device').boundingClientRect()
				// 获取滚动容器css数据
				query.exec((resData) => {
					if (resData && resData.length) {
						// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
						scrollHeight.value = res.windowHeight - resData[0].top + 'px'
					}
				})
			}
		})


	})

	onPullDownRefresh(() => {
		pageNumber.value = 1
		getDeviceList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000);
	})

	onShow(() => {
		// 获取设备列表
		getDeviceList()
	})
	// 搜索设备
	const searchDevice = () => {
		deviceList.value = []

		pageNumber.value = 1
		// 获取设备列表
		getDeviceList()
	}
	// 默认选择的分类
	const currentIndex = ref(0);
	// 网络列表
	const networkList = reactive([{
		name: "全部",
		value: 0
	}, {
		name: "在线",
		value: 1
	}, {
		name: "离线",
		value: 2
	}])

	// 选择设备分类
	const selectDevice = (item, index) => {
		currentIndex.value = index;
		deviceStatus.value = classifyAll.value[index].value

		pageNumber.value = 1
		getDeviceList();

	}

	// 运营商列表
	const yunYiList = reactive([{
		name: "移动",
		value: 0
	}, {
		name: "联通",
		value: 1
	}, {
		name: "电信",
		value: 2
	}])
	// 筛选条件
	const isShowFuliter = ref(false);

	// 重置筛选条件
	const resertFuliter = () => {
		isShowFuliter.value = false;
	}

	// 确认筛选条件
	const confirmFuliter = () => {
		isShowFuliter.value = false;
	}
	const show = ref(false);
	// 分类背景图片
	const lineBg = ref("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/baiqianxian%402x.png")

	// 收益分类
	const list1 = ref([{
			name: '路由器',
			value: "router"
		}, {
			name: '大节点',
			value: "node"
		},
		{
			name: '盒子',
			value: "smallbox"
		},

	]);

	// 全部分类
	const classifyAll = ref([{
			name: "全部",
			value: "all"
		},
		{
			name: "运行中",
			value: "online"
		}, {
			name: "离线",
			value: "outline"
		}
	])

	const uDropdownRef = ref(null);

	// 显示筛选条件
	const showFilter = () => {
		isShowFuliter.value = !isShowFuliter.value;
	}

	// 去跳转添加设备列表
	const addDevice = () => {
		uni.navigateTo({
			url: "/pagesA/device/deviceChild/addDevice"
		})
	}

	// 设备类型
	const deviceType = ref("router")

	// 选择设备分类
	const selectType = (val) => {
		if (val.index == 0) {
			deviceType.value = list1.value[val.index].value
			deviceList.value = []

			pageNumber.value = 1
			getDeviceList();
		} else {
			uni.showToast({
				title: "暂未开放",
				icon: "none"
			})
		}
	}

	// 去设备详情
	const goDeviceDetail = (val) => {
		uni.navigateTo({
			url: "/pagesA/device/deviceChild/deviceDetail?nodeId=" + val.code
		})
	}

	const deviceList = ref([]);

	const pageNumber = ref(1);

	const pageSize = ref(30);

	const deviceStatus = ref("all");

	const deviceTotal = ref(0);

	// 搜索条件
	const userName = ref("");

	// 获取设备列表
	const getDeviceList = () => {
		let e = {
			url: '/app-api/device/page',
			data: {
				pageNo: pageNumber.value,
				pageSize: pageSize.value,
				status: deviceStatus.value,
				deviceType: deviceType.value,
				name: userName.value
			}
		};
		api.default.get(e).then((res) => {
			if (pageNumber.value == 1) {
				deviceList.value = res.data.list;
			} else {
				deviceList.value = deviceList.value.concat(res.data.list);
			}

			deviceTotal.value = res.data.total
		})
	}

	// 上拉刷新
	const teamlower = () => {
		if (deviceTotal.value > deviceList.value.length) {
			pageNumber.value++;

			// 调用设备列表
			getDeviceList()
		}

	}
</script>

<style scoped>
	.resertFuliter {
		width: 160rpx;
		height: 60rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 50rpx;
		margin-top: 50rpx;
	}

	.confirmFuliter {
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #A102FF 0%, #162CFF 100%);
		border-radius: 50rpx;
		margin-top: 50rpx;
	}

	.fuliterMain {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #141039;
	}

	.netWorkItem {
		width: 200rpx;
		height: 60rpx;
		box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59);
		border-radius: 8rpx;
		/* background-color: ; */
	}

	.AIItem {
		padding: 5rpx;
		box-sizing: border-box;
		background-color: #e4393c;
	}

	.deviceYun>view {
		width: 50%;
	}

	.deviceAddIcon {
		/* box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59); */
		border-radius: 50rpx;
		position: fixed;
		right: 20rpx;
		bottom: var(--window-bottom);
		padding: 10rpx 50rpx;
		box-sizing: border-box;
		border: 2rpx solid #141039;
		background-color: rgba(43, 23, 147, 0.59);
	}

	.deviceMain {
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.deviceStatus {
		position: absolute;
		top: 3rpx;
		right: 20rpx;
	}

	.deviceHead {
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.deviceItem {
		width: 690rpx;
		/* height: 358rpx; */
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/shebeilb-bg@2x.png");
		background-size: 100% 100%;
		margin-top: 28rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}

	.liXianIcon {
		width: 24rpx;
		height: 22rpx;
		margin-right: 6rpx;
		position: relative;
		top: 2rpx;
	}

	.onlineDevice {
		width: 33%;
		border-left: 2rpx solid #0E3E7D;
		border-right: 2rpx solid #0E3E7D;
	}

	.deviceNum {
		margin-top: 28rpx;
		width: 690rpx;
		height: 146rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/gongnengbg@2x.png");
		background-size: 100% 100%;
		font-size: 22rpx;
	}

	.pageDevice {
		height: 100%;
	}

	.deviceBg {
		height: 100%;
		width: 100%;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/shebei-bg@2x.png");
		background-size: 100% 100%;
		padding-bottom: var(--window-bottom);
	}

	.pageDevice /deep/ .u-navbar__content {
		background-color: transparent !important;
	}

	.pageDevice /deep/ .u-input {
		background: rgba(10, 0, 101, 0.5);
		border: none;
		height: 60rpx;
		box-shadow: inset 0rpx 0rpx 14rpx 0rpx #1D0288;
	}

	.pageDevice /deep/ .uni-input-input {
		color: #fff !important;
	}

	.pageDevice /deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 32rpx;
	}

	.jieFen {
		margin-top: 30rpx;
		position: relative;
	}

	.fuliterBox {
		width: 100%;
		height: 90vh;
		position: absolute;
		top: 85rpx;
		left: 0;
		right: 0;
		bottom: 0;

		background-color: rgba(0, 0, 0, 0.8);
		/* padding: 20rpx;
		box-sizing: border-box; */
		z-index: 9999;
	}

	.defaultClassify {
		width: 134rpx;
		height: 48rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/leibie-bg1%402x.png") no-repeat;
		background-size: 100% 100%;
		font-size: 26rpx;
	}

	.activeClassify {
		width: 134rpx;
		height: 48rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/leibie-bg2@2x.png") no-repeat;
		background-size: 100% 100%;
		font-size: 26rpx;
	}

	.classifyMain {
		margin-top: 28rpx;
	}

	.pageDevice /deep/ input {
		color: #fff !important;
	}

	.pageDevice /deep/ .uni-input-placeholder,
	.pageDevice /deep/ .input-placeholder {
		color: #5A669E !important;
		font-size: 26rpx !important;
	}

	.pageDevice /deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 30rpx !important;
	}
</style>